<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="1200"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog(false)"
  >
    <el-tabs v-model="activeTabName" style="margin-top: -25px" @tab-click="handleTabChange">
      <el-tab-pane label="专户信息" name="base" style="height: 400px">
        <base-info v-show="activeTabName == 'base'" :id="dialogDetail.id" />
      </el-tab-pane>
      <el-tab-pane label="收支信息" name="income" style="height: 400px">
        <income v-show="activeTabName == 'income'" :id="dialogDetail.id"
      /></el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script lang="ts" setup>
import BaseInfo from "./components/BaseInfo/index.vue";
import Income from "./components/Income/index.vue";
import type { TabsPaneContext } from "element-plus";
const activeTabName = ref<any>("base");
const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "详情",
      id: 0,
    }),
  },
});

const { dialogDetail } = toRefs(props);

const emit = defineEmits(["sendClose"]);

//选项卡改变
const handleTabChange = (tab: TabsPaneContext, event: Event) => {
  activeTabName.value = tab.paneName;
};
const initForm = async function () {
  activeTabName.value = "base";
};
onMounted(async () => {
  initForm();
});

/**
 * 关闭弹窗
 */
function closeDialog(query: boolean) {
  initForm();
  emit("sendClose", query);
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}
.dialog_footer {
  // display: flex;
  // justify-content: center;
}
:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
